<template>
  <el-input
    v-if="componentName === 'ElInput'"
    v-model="modelVal"
    clearable
    v-bind="$attrs"
  ></el-input>
  <el-input-number
    v-if="componentName === 'ElInputNumber'"
    v-model="modelVal"
    clearable
    v-bind="$attrs"
  ></el-input-number>
  <el-select
    v-if="componentName === 'ElSelect'"
    v-model="modelVal"
    clearable
    v-bind="$attrs"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
  <el-date-picker
    v-if="componentName === 'ElDatePicker'"
    v-model="modelVal"
    clearable
    v-bind="$attrs"
    @change="handleElDatePickerChange"
  >
  </el-date-picker>
</template>

<script setup>
const props = defineProps({
  componentName: {
    type: String,
    default: 'ElInput',
  },
  prop: String,
  label: String,
  // 下拉数据
  options: {
    type: Array,
    default: () => [],
  },
  // 切割字段，用于时间区间，例如开始时间结束时间分别使用字段接收
  splitField: {
    type: Array,
    default: () => [],
  },
  // select这种组件的props配置
  props: {
    type: Object,
    default: () => ({
      value: 'value',
      label: 'label',
      options: 'options',
      disabled: 'disabled',
    }),
  },
})

const modelVal = defineModel('formData')

// const handleElDatePickerChange = (dateRange) => {
//   console.log(dateRange, 'dateRange')
//   dateRange = dateRange || []
//   const [startDate, endDate] = dateRange
//   if (dateRange.length === 2) {
//     if (props.splitField.length === 2) {
//       fromData.value[props.splitField[0]] = startDate
//       fromData.value[props.splitField[1]] = endDate
//     }
//   } else {
//     fromData.value[props.splitField[0]] = undefined
//     fromData.value[props.splitField[1]] = undefined
//   }
// }
</script>

<style lang="scss" scoped>
.el-input-number,
.el-input,
.el-select,
.el-date-picker {
  width: 100%;
}
</style>
